﻿<template>
  <van-popup v-model="visible" position="bottom" closeable>
    <van-form :loading="loading">
      <VanFieldCheckbox
        name="Users"
        label="组员"
        v-model="formFields.Users"
        :disabled="disabled"
        :columns="useroption"
        :option="option"
        :rules="[{ required: true, message: '必填' }]"
      />
      <van-field
        v-model="formFields.Name"
        :disabled="disabled"
        name="Name"
        label="组名"
        :rules="[{ required: true, message: '必填' }]"
      />
      <van-field :disabled="disabled" name="Avatar" label="头像">
        <template #input>
          <c-upload-img v-model="formFields.Avatar" :max-count="1" />
        </template>
      </van-field>
      <van-field
        :disabled="disabled"
        v-model="formFields.Title"
        name="Title"
        label="主题"
      />
      <van-field
        :disabled="disabled"
        v-model="formFields.Remark"
        name="Remark"
        label="备注"
      />
      <van-field :disabled="disabled" name="Appendix" label="附件">
        <template #input>
          <c-upload-file
            v-model="formFields.Appendix"
            :maxCount="1"
          ></c-upload-file>
        </template>
      </van-field>
      <div style="margin: 16px; text-align:center;">
        <van-button
          v-if="!disabled && this.entity.Id"
          key="delete"
          type="danger"
          :loading="loading"
          @click="handleDelete"
          >解散</van-button
        >
        <van-button
          style="margin-left:16px;"
          v-if="disabled && this.entity.Id"
          key="exit"
          type="danger"
          :loading="loading"
          @click="handleExit"
          >退出</van-button
        >
        <van-button
          style="margin-left:16px;"
          key="submit"
          type="primary"
          :loading="loading"
          :disabled="disabled"
          @click="handleSubmit"
          >提交</van-button
        >
        <van-button
          style="margin-left:16px;"
          key="cancel"
          :loading="loading"
          @click="handleCancel"
          >关闭</van-button
        >
      </div>
    </van-form>
  </van-popup>
</template>

<script>
import {
  D_UserMessage_GetTheData,
  D_UserMessage_SaveData,
  D_UserMessage_DeleteData
} from "@/api/D_Manage/D_UserMessage";
import { mapGetters, mapActions } from "vuex";
import CUploadFile from "@/components/CUploadFile/";
import CUploadImg from "@/components/CUploadImg/";
import VanFieldCheckbox from "@/components/VanField/VanFieldCheckbox";

export default {
  components: {
    CUploadFile,
    CUploadImg,
    VanFieldCheckbox
  },
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      formFields: {
        UserIds: "",
        Users: [],
        Name: "",
        Avatar: "",
        Title: "",
        Remark: "",
        Appendix: ""
      },
      entity: {},
      useroption: [],
      option: {
        label: "text",
        value: "value"
      },
      disabled: false
    };
  },
  mounted() {
    this.GetAllUser().then(res => {
      this.useroption = res;
    });
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    ...mapActions(["GetAllUser"]),
    openForm(id, title) {
      //参数赋值
      this.title = title || "新增群组";
      this.loading = true;
      //组件初始化
      this.init();

      //编辑赋值
      if (id) {
        this.$nextTick(() => {
          D_UserMessage_GetTheData({ id: id }).then(resJson => {
            this.entity = resJson.Data;
            this.formFields.Users = resJson.Data.UserIds.slice(1, -1).split(
              "^"
            );
            this.formFields.Name = this.entity.Name;
            this.formFields.Title = this.entity.Title;
            this.formFields.Remark = this.entity.Remark;
            this.formFields.Appendix = this.entity.Appendix;
            this.formFields.Avatar = this.entity.Avatar;
            this.disabled = this.entity.CreatorId !== this.userInfo.Id;
            this.loading = false;
          });
        });
      } else {
        this.loading = false;
      }
    },
    init() {
      this.entity = {};
      this.visible = true;
      this.formFields = {
        UserIds: "",
        Users: [],
        Name: "",
        Avatar: "",
        Title: "",
        Remark: "",
        Appendix: ""
      };
      this.disabled = false;
    },

    handleSubmit(value) {
      if (this.formFields.Users.length === 0) {
        this.$toast("群组成员为空");
        return;
      }
      if (this.formFields.Name === "") {
        this.$toast("群组名为空");
        return;
      }
      let userNames = [];
      this.formFields.Users.forEach(item => {
        let tempuser = this.useroption.find(d => d.value === item);
        if (tempuser !== null && typeof tempuser !== "undefined") {
          userNames.push(tempuser.text);
        } else {
          this.$toast("存在未知的群组成员:" + item);
          return;
        }
      });

      this.entity = Object.assign(this.entity, this.formFields);
      this.entity.UserNames = "^" + userNames.join("^") + "^";
      this.entity.UserIds = "^" + this.formFields.Users.join("^") + "^";
      this.entity.Avatar = this.formFields.Avatar || "/Images/group.jpg";

      this.loading = true;
      D_UserMessage_SaveData(this.entity).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast("操作成功");
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    },

    handleDelete() {
      this.$dialog
        .confirm({
          title: "确认解散吗?"
        })
        .then(() => {
          // on confirm
          D_UserMessage_DeleteData({
            ids: [this.entity.Id]
          }).then(resJson => {
            if (resJson.Success) {
              this.$toast("操作成功!");
              this.visible = false;
              this.afterSubmit();
            } else {
              this.$toast(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleExit() {
      this.$dialog
        .confirm({
          title: "确认退出吗?"
        })
        .then(() => {
          let userNames = [];
          let userIds = [];
          this.formFields.Users.forEach(item => {
            let tempuser = this.useroption.find(d => d.value === item);
            if (
              tempuser !== null &&
              typeof tempuser !== "undefined" &&
              tempuser.value !== this.userInfo.Id
            ) {
              userNames.push(tempuser.text);
              userIds.push(tempuser.value);
            }
          });
          this.entity.UserNames = "^" + userNames.join("^") + "^";
          this.entity.UserIds = "^" + userIds.join("^") + "^";
          // on confirm
          D_UserMessage_SaveData(this.entity).then(resJson => {
            if (resJson.Success) {
              this.$toast("操作成功!");
              this.visible = false;
              this.afterSubmit();
            } else {
              this.$toast(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    handleCancel() {
      this.visible = false;
    }
  },
  filters: {
    GroupAvatarFilter: function(data) {
      if (data === null || data === "" || typeof data === "undefined")
        return "/Images/group.jpg";
      return data;
    }
  }
};
</script>
